<template>
  <div>
        <div>
          <el-breadcrumb separator="/" separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>系统管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/student' }"
            >学生管理
            </el-breadcrumb-item
            >
          </el-breadcrumb>
        </div>
    <div class="app-container">
      <!-- 讲师列表 -->

      <!--查询表单-->
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="teacherQuery.name" placeholder="员工姓名" suffix-icon="el-icon-search"/>
        </el-form-item>

        <el-form-item>
          <el-select v-model="teacherQuery.departmentid" clearable placeholder="部门">
            <el-option label="生活部" value="1"/>
            <el-option label="市场部" value="2"/>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-select v-model="teacherQuery.workid" clearable placeholder="职位">
            <el-option label="产品经理" value="1"/>
            <el-option label="设计主管" value="2"/>
            <el-option label="设计师" value="3"/>
          </el-select>
        </el-form-item>


        <el-button icon="el-icon-search" type="primary" @click="getList()"
        >查询
        </el-button
        >
        <el-button type="warning" @click="resetData()" icon="el-icon-delete">清空</el-button>
        <div>
          <!--          <el-button type="primary" @click="handleAdd"> 新增 <i class="el-icon-circle-plus-outline"></i></el-button>-->

          <!-- <el-button @click="toggleSelection()">批量删除</el-button> -->
          <!--          <el-button slot="reference" type="danger" @click="toggleSelection()"-->
          <!--          >批量删除 <i class="el-icon-remove-outline"></i-->
          <!--          ></el-button>-->
          <!--          <el-button class="ml-5" type="success">导入 <i class="el-icon-upload el-icon&#45;&#45;right"></i></el-button>-->


          <!--          <el-button type="info" @click="daochu" >导出 <i class="el-icon-upload el-icon&#45;&#45;right"></i></el-button>-->
        </div>
      </el-form>

      <!--      <el-form label-width="120px">-->
      <!--        <el-form-item label="信息描述">-->
      <!--          <el-tag type="info">excel模版说明</el-tag>-->
      <!--          <el-tag>-->
      <!--            <i class="el-icon-download"/>-->
      <!--            <a :href="'/static/stu.xlsx'">点击下载模版</a>-->
      <!--          </el-tag>-->

      <!--        </el-form-item>-->


      <!--        <el-form-item label="选择Excel" label-width="120px">-->
      <!--          <el-upload-->
      <!--            ref="upload"-->
      <!--            :auto-upload="false"-->
      <!--            :on-success="fileUploadSuccess"-->
      <!--            :on-error="fileUploadError"-->
      <!--            :disabled="importBtnDisabled"-->
      <!--            :limit="1"-->
      <!--            :action="'/studentVue/addSubject'"-->
      <!--            name="file"-->
      <!--            accept="application/vnd.ms-excel">-->
      <!--            <el-button slot="trigger"  type="info"> 点击上传 <i class="el-icon-upload el-icon&#45;&#45;right"/></el-button>-->
      <!--            <el-button-->
      <!--              :loading="loading"-->
      <!--              style="margin-left: 10px;"-->
      <!--              type="success"-->
      <!--              @click="submitUpload">{{ fileUploadBtnText }}</el-button>-->
      <!--          </el-upload>-->
      <!--        </el-form-item>-->

      <!--      </el-form>-->

      <div style="margin: 0px auto">
        <!-- 表格 -->
        <el-table
          v-loading="listLoading"
          :data="list"
          border
          element-loading-text="数据加载中"
          fit
          highlight-current-row
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="45"></el-table-column>

          <el-table-column align="center" label="序号" width="70">
            <template slot-scope="scope">
              {{
                (teacherQuery.page - 1) * teacherQuery.limit + scope.$index + 1
              }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="员工名称" width="100">
            <template slot-scope="scope">
              {{ scope.row.employee.name }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="员工部门" width="100">
            <template slot-scope="scope">
              {{ scope.row.departName }}
            </template>
          </el-table-column>
          <!-- 头像 开始-->
          <el-table-column label="员工头像" width="100px" align="center">
            <template slot-scope="scope">
              <div class="info">
                <div class="pic">
                  <img :src="scope.row.resumePicture.picture" alt="scope.row.title" width="80px"/>
                </div>
              </div>
            </template>
          </el-table-column>
          <!-- 头像 结束 -->
          <el-table-column label="员工职位" prop="position" align="center" width="100"/>

          <el-table-column label="员工类型" width="100" align="center" prop="emptype">

          </el-table-column>

          <el-table-column label="员工状态" width="100" align="center" prop="empstate">

          </el-table-column>

          <el-table-column label="社保参保状态" align="center" width="120">
            <template slot-scope="scope">
              <span v-if="scope.row.socialstate === 0">未投保</span>
              <span v-if="scope.row.socialstate === 1">待投保</span>
              <span v-if="scope.row.socialstate === 2">投保中</span>
              <span v-if="scope.row.socialstate === 3">待停保</span>
            </template>
          </el-table-column>


          <el-table-column align="center" label="操作" width="200">

            <template slot-scope="scope">

              <router-link :to="'/s/toubao/' + scope.row.sid">
                <el-button type="primary" size="mini" icon="el-icon-edit"
                >投保
                </el-button>
              </router-link>

              <!--            <el-button type="warning" size="mini" @click="handleEdit(scope.row)">-->
              <!--              投保 <i class="el-icon-edit"></i>-->
              <!--            </el-button>-->

              <!--&lt;!&ndash;            <router-link :to="'/student/edit/' + scope.row.stuId">&ndash;&gt;-->
              <!--&lt;!&ndash;              <el-button icon="el-icon-edit" size="mini" type="primary"&ndash;&gt;-->
              <!--&lt;!&ndash;              >修改&ndash;&gt;-->
              <!--&lt;!&ndash;              </el-button>&ndash;&gt;-->
              <!--&lt;!&ndash;            </router-link>&ndash;&gt;-->
              <!--            <el-button-->
              <!--              icon="el-icon-delete"-->
              <!--              size="mini"-->
              <!--              type="danger"-->
              <!--              @click="removeDataById(scope.row.stuId)"-->
              <!--            >删除-->
              <!--            </el-button>-->
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <el-pagination
        :current-page="teacherQuery.page"
        :page-size="teacherQuery.limit"
        :page-sizes="[3, 5, 8, 10]"
        :total="total"
        background
        layout="total, sizes ,prev, pager, next, jumper"
        style="padding: 30px 0; text-align: center"
        @current-change="getList"
        @size-change="handleSizeChange"
      />

    </div>
  </div>
</template>

<script>


export default {

  data() {
    //定义变量和初始值
    return {
      list: null, //查询之后接口返回集合
      // page: 1, //当前页
      // limit: 6, //每页记录数
      total: 0, //总记录数vu
      teacherQuery: {
        page: 1, //当前页
        limit: 5, //每页记录数
        workid: '',
      }, //条件封装的对象
      multipleSelection: [],//批量删除的ids 需要转成数组
      dialogFormVisible: false,
      teacher: {
        idNum: "",
      },
      saveBtnDisabled: false,
      BASE_API: process.env.BASE_API, // 接口API地址    BASE_API: '"http://localhost:8080"',
      fileUploadBtnText: '上传到服务器', // 按钮文字
      importBtnDisabled: false, // 按钮是否禁用,
      loading: false,//上传的loading
      listLoading: true, // 是否显示loading信息
    };
  },
  created() {
    //页面渲染之前执行，一般调用methods定义的方法
    this.getList();
    // this.getOneSubject(); //初始化省
  },
  methods: {
    //创建具体的方法，调用teacher.js定义的方法
    //讲师列表的方法
    handleSizeChange(limit) {
      console.log(limit);

      this.teacherQuery.limit = limit;
      this.getList();
    },
    getList(page = 1) {
      this.teacherQuery.page = page;
      // this.$axios({
      //   method: 'post',
      //   url:"//studentVue/StudentfindAllormodil",
      //   data:  this.teacherQuery
      // })
      this.$axios
        .post("http://localhost:8007/conference/social-details/findAll",
          this.teacherQuery
        )
        .then((response) => {
          this.list = response.data.data.rows;
          this.total = response.data.data.total;
          console.log(this.total)
          console.log(this.list)
          this.listLoading = false  //记得：否显示loading信息
        }) //请求成功
        .catch((error) => {
          console.log(error);
        }); //请求失败
    },
    // 条件清空
    resetData() {
      this.teacherQuery = {
        page: 1, //当前页
        limit: 6, //每页记录数
      };
      this.getList();
    },
    //删除
    removeDataById(id) {
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return this.$axios.get("/studentVue/deleteById/" + id);
        })
        .then(() => {
          this.getList(); //回到列表页面
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch((response) => {
          // 失败
          if (response === "cancel") {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          } else {
            this.$message({
              type: "error",
              message: "删除失败",
            });
          }
        });
    },


    //下拉框强制更新
    xianThreeChanged(value) {
      this.$forceUpdate(); //强制更新
    },
    //批量删除的ids集合
    handleSelectionChange(val) {
      this.multipleSelection = val;
      // console.log(this.multipleSelection);
    },
    //批量删除 multipleSelection -> 转化成数组
    toggleSelection() {
      let ids = this.multipleSelection.map((v) => v.stuId);
      // console.log(ids);

      this.$confirm("此操作将永久删除" + ids.length + "条记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return this.$axios.delete("/studentVue/batchDeletelist/" + ids);
        })
        .then(() => {
          this.getList(); //回到列表页面
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch((response) => {
          // 失败
          if (response === "cancel") {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          } else {
            this.$message({
              type: "error",
              message: "删除失败",
            });
          }
        });
    },


    //点击编辑按钮
    handleEdit(row) {


      // console.log(row)//拿到当前行的所有数据
      console.log(row.sid)//拿到当前行的id

      //根据id查询的方法
      // this.getInfo(row.stuId);
      // this.initott();
      // this.teacher = JSON.parse(JSON.stringify(row))
      // this.dialogFormVisible = true
    },

    //打开添加按钮
    handleAdd() {
      this.dialogFormVisible = true
      this.teacher = {}

    },

    //保存按钮
    saveOrUpdate() {
      this.saveBtnDisabled = true; //保存按钮是否禁用（避免重复提交）

      // 判断是添加/修改学生的方法
      if (!this.teacher.stuId) {
        //添加
        console.log("1");
        console.log(this.teacher);
        this.saveTeacheradd();
      } else {
        //修改
        this.updateTeacher();
        console.log("2");
      }
    },


    //上传
    submitUpload() { //点击按钮上传文件到接口里面
      this.fileUploadBtnText = '正在上传'
      this.importBtnDisabled = true
      this.loading = true
      //  js:document.getElementById("upload").submit()   upload - id唯一标识
      this.$refs.upload.submit()
    },
    fileUploadSuccess() {//上传成功
      // 提示信息
      this.loading = false
      this.$message({
        type: "success",
        message: "导入成功！"
        // message:response.message
      })
      //通过路由跳转到课程分类列表
      // this.$router.push({path:'/subject/list'})

    },
    fileUploadError() {//上传失败
      // 提示信息
      this.loading = false
      this.$message({
        type: "success",
        message: "导入失败"
        // message:response.message
      })
    },

    //下载
    daochu() {
      this.$axios.get("/studentVue/read")
        .then((response) => {
          // 提示信息
          return this.$message({
            type: "success",
            message: "导出成功!",
          });
        })
        .catch(() => {
          return this.$message({
            message: '导出失败！',
            type: 'warning'
          });
        })
    }

  },
};
</script>

<style>
</style>
